<!-- 项目动态 -->
<template>
  <div class="main main-dynamic">
    <div v-if="dataList.length!=0" class="head pt32 pb32">
      <div class="back-title ft14">
        <div class="fc-black">
          {{ type == '2' ? '与我相关':(projectId==''?'全部项目':projectInfo.shortName||projectSearchName)}}（{{dataList.length}}）
        </div>
      </div>
      <div class="pr48" v-if="false">
        <div class="align-row-center pointer" @click="openAddSummary">
          <i class="icon add_new-job mr8"></i>
          <span class="fc-gray ft14">追加总结</span>
        </div>
      </div>
    </div>
    <div class="content pb24 scrollbar-y">
      <div class="list-dynamic ">
        <div class="item pointer pb16" v-for="(item,index) in dataList" :key="index">
          <div v-if="!item.systemDynamic" class="item-release  pt40 pr48 pb24 pl40">
            <div class="item-head">
              <div class="head-img"><img :src="!!item.createUserHeadImage == true ? serverIp.setImgUrl(item.createUserHeadImage) : defaultHeadImg"/></div>
              <div class="head-content pr24">
                <div class="space-between ">
                  <p class="ft14 fc-black ">{{item.createUserName}}</p>
                  <div class="flex flex-space-between" v-if="false">
                    <i class="icon ic_edit mr32 pointer"
                       v-if="type == 1 && index == 0 && isManager == true && new Date().getTime() < (1000 * 60 * 60 * 24) + (item.addTime * 1)"
                       @click="openEditSummary(item)" title="修改"></i>
                    <i class="icon ic_delete-fill pointer"
                       v-if="type == 1 && index == 0 && isManager == true && new Date().getTime() < (1000 * 60 * 60 * 24) + (item.addTime * 1)"
                       @click="deleteSummary(item.id)" title="删除"></i>
                  </div>
                </div>

                <div class="align-row-center ft12 fc-gray">
                  <div class="align-row-center pr32">
                    <i  class="icon ic_fill mr8 "></i>

                    <span v-text="item.projectShortName || '无归属项目'"></span>
                  </div>
                  <div class="align-row-center" v-if="type == 1">
                    <i v-if="item.planId && !!item.planName == true" class="plan_icon_qi mr8"></i>
                    <i class="icon ic_schedule mr8" v-if="item.planId&&item.managerReport"></i>
                    <span class="mr16" v-if="item.planId">{{item.planName}}</span>
                    <span class="mr16" v-if="!item.planId&&item.managerReport">项目进度：{{ item.progressProportion || 0}}%</span>
                    <i v-if="!item.planId&&item.managerReport" class="icon mr8"
                       :class="item.upDown > 0 ? 'ic_up' : (item.upDown < 0 ? 'ic_down' : 'ic_flat')"></i>
                    <span v-if="!item.planId&&item.managerReport" class="ft12"
                          :class="item.upDown > 0 ? 'fc-blue' : (item.upDown < 0 ? 'fc-orange' : 'fc-gray')">{{ item.upDown }}%</span>
                  </div>
                  <div class="align-row-center" v-else>
                    <i class="icon ic_flag-fill mr8" v-if="item.managerReport == true || !!item.planName == true"></i>
                    <span class="mr16">{{ item.managerReport == true ? '项目经理一周总结' : item.planName }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="item-content">
              <p class="content-text ft14 lh30" :title="item.content" v-text="item.content"></p>
              <ul v-if="item.photos&&item.photos.length>0" class="images-list">
                <li v-for="(d,i) in item.photos" :key="i" :class="computedAvatar(item.photos)">
                  <div class="img" :style="{backgroundImage: 'url(\''+ (encodeURI(d.fileUrl)) +'\')' }" @click="opemImg(d.fileUrl)"></div>
                </li>
              </ul>
              <ul v-if="item.videos&&item.videos.length>0" class="video-list">
                <li v-for="(d,i) in item.videos" :key="i">
                  <video :src="d.fileUrl" controls="controls">
                    您的浏览器不支持 video 标签。
                  </video>
                </li>

              </ul>
              <ul v-if="item.files&&item.files.length>0" class="files-list">
                <li v-for="(d,i) in item.files" :key="i" @click="fileDownload(d.fileUrl)">
                  <i :class="d.fileNameSuffix+'-icon'" ></i>
                  <p class="ellipsis w9 pl5">{{d.fileName}}</p>
                </li>
              </ul>
              <div class="pt16 space-between">
                <p class="fc-gray">{{ !!item.addTime == true ? new Date(item.addTime).Format('yyyy-MM-dd mm:ss') :''
                  }}</p>
                <div class="align-row-center">
                  <i class="icon mr16" :class="item.selfLikes == true ? 'ic_like' : 'ic_dislike'"
                     @click="setLikes(item)" :title="item.selfLikes == true ? '取消点赞' : '点赞'"></i>
                  <span class="mr50"
                        v-text="item.dynamicLikesVos != null ? item.dynamicLikesVos.length || 0 : 0"></span>
                  <i class="icon ic_comment-dots mr16" @click="setPingLunInputShow(item)"
                     :title="item.zdy_isShowPingLunInput == 1 ? '取消评论' : '评论'"></i>
                  <span v-text="item.oneLevelComments != null ? item.oneLevelComments.length || 0 : 0"></span>
                </div>
              </div>
            </div>
            <span class="plan_icon" v-if="item.planLevel==1&&item.type==3">
              <i></i>
              里程碑完结  提前<span >{{item.completeTimeCn}}</span></span>
            <span class="plan_icon" style="color: #FF8F2B;" v-if="item.type==2">逾期{{item.completeTimeCn}}</span>
          </div>
          <div v-if="!item.systemDynamic" class="item-comment"
               v-show="item.zdy_isShowPingLunInput != 0 || (item.dynamicLikesVos != null && item.dynamicLikesVos.length > 0) || (item.oneLevelComments != null && item.oneLevelComments.length > 0)">
            <div class="comment">
              <div class="comment_zan" v-if="item.dynamicLikesVos != null && item.dynamicLikesVos.length > 0">
                <i class="icon mt5 ic_like mr12"></i>
                <div class="zan_likes">
                                    <span class="ft14" v-for="(itemLikes,indexLikes) in item.dynamicLikesVos"
                                          :key="indexLikes">
                                        {{ itemLikes.userName + ((indexLikes + 1) != item.dynamicLikesVos.length ? '，' : '') }}
                                    </span>
                </div>
              </div>
              <div class="mb19 pt16" v-if="item.dynamicLikesVos != null && item.dynamicLikesVos.length > 0&&item.oneLevelComments.length>0" style="border-bottom: 1px solid #dee6ec;"></div>
              <div :class="['comment_pinglun',indexPL==0?'':'pt16',indexPL==0?'':'bd-t']" v-for="(itemPL,indexPL) in item.oneLevelComments" :key="indexPL">
                <div class="pinglun_tx mt5"><img :src="!!itemPL.userHeadImage == true ? serverIp.setImgUrl(itemPL.userHeadImage) : defaultHeadImg"/></div>
                <div class="pinglun_item">
                  <p class="ft14 lh24">
                    <span class="fc-blue" v-text="itemPL.userName"></span>
                    <span v-if="!!itemPL.responseUserName == true">
                                            回复&nbsp;
                                            <span class="fc-blue" v-text="itemPL.responseUserName"></span>
                                        </span>：
                    <span class="fc-black word_wrap" v-text="itemPL.content"></span>
                  </p>
                  <p class="ft12 fc-gray lh32">
                    <span class="mr24"
                          v-text="!!itemPL.addTime == true ? new Date(itemPL.addTime).Format('yyyy-MM-dd hh:mm') :''"></span>
                    <span class="" @click="setHuiFuInputShow(item,itemPL)">回复</span>
                  </p>
                </div>
              </div>
              <div class="comment_pinglun pt16" v-show="item.zdy_isShowPingLunInput != 0">
                <div class="pinglun_tx"><img :src="!!$store.state.userInfo.headImage == true ? serverIp.setImgUrl($store.state.userInfo.headImage) : defaultHeadImg"/></div>
                <div class="pinglun_item">
                  <div class="pinglun_input">
                    <el-input
                      type="textarea"
                      :resize="'none'"
                      autosize
                      :placeholder="item.zdy_isShowPingLunInput == 1 ? '请输入评论内容' : '回复@' + huiFuName"
                      v-model="item.zdy_content"
                      :size="'small'"
                      style="width:562px;"
                    >
                    </el-input>
                  </div>
                </div>
                <div class="pinglun_btns">
                  <div class="pinglun_btn" @click="addPingLunSubmit(item)">评论</div>
                </div>
              </div>
            </div>

          </div>
          <!--          系统动态-->
          <div v-if="item.systemDynamic" class="system-dynamic">
            <h3>
              系统动态
              <i>通知</i>
            </h3>
            <p>
              {{item.content}}
            </p>
            <div class="time">
              {{ !!item.addTime == true ? new Date(item.addTime).Format('yyyy-MM-dd mm:ss') :''}}
            </div>
            <span class="img xt"></span>
          </div>
        </div>
      </div>
    </div>
    <transition name="fade">
      <div class="main-popup" v-if="is_show_setSummary">
        <set-summary @close="closeModal" @callback="setSummaryCallback" :data="addOrEditData"/>
      </div>
    </transition>
    <transition name="fade">
      <div class="main-popup" v-if="is_show_deleteSummary">
        <message-box @close="closeModal" @callback="deleteSummaryCallback" :indexClose="'is_show_deleteSummary'"
                     :content="'动态删除后不可再恢复，请确认是否要删除该动态？'"></message-box>
      </div>
    </transition>
    <div v-if="dataList.length==0" class="default-page">
      <div class="box">
        <img src="../../../assets/img/defaultPage/pic_zwdt.png" alt="">
        <p>暂无发布动态</p>
      </div>
    </div>
    <el-dialog append-to-body :visible.sync="dialogVisible" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <loading v-if="is_show_loading"></loading>
  </div>
</template>

<script>
  import setSummary from '@/components/projectInfo/setSummary'; //设置项目总结
  import messageBox from '@/components/base/messageBox'; //消息弹窗
  import loading from '@/components/loading'
  export default {
    components: {
      setSummary,
      messageBox,loading
    },
    watch: {
      $route() {
        this.projectSearchName = this.$route.query.projectName;
        this.projectId = this.$route.query.projectId;
        this.type = this.$route.query.type;//1项目分类 2：与我相关
        this.is_show_loading=true;
        if (this.projectSearchName) {
          this.getDataList();
        } else {
          if (this.type == 1) {
            //项目
            this.getProjectInfo();
            this.getDataList();
          } else if (this.type == 2) {
            //与我相关
            this.get_dynamic_relatedMe();
          }
        }

      }
    },
    data() {
      return {
        is_show_loading:true,
        dialogVisible:false,
        dialogImageUrl:'',
        projectSearchName: '',
        dynamicCommentId: '',  //回复人id
        huiFuName: '', //回复人名称
        is_show_setSummary: false,
        is_show_deleteSummary: false,
        deleteId: '',
        projectId: '',
        type: '',//1项目分类 2：与我相关
        addOrEditData: {},
        projectInfo: {},
        dataList: [],
        isManager: false, //是否是项目经理
        cur_project_name: '当前项目名称',
        defaultHeadImg:require('../../../assets/img/ic_tx_gzq.png')
      };
    },
    computed: {},
    created() {
      this.projectId = this.$route.query.projectId;
      this.type = this.$route.query.type;//1项目分类 2：与我相关
    },
    mounted() {
      if (this.type == 1) {
        //项目
        this.getProjectInfo();
        this.getDataList();
      } else {
        //与我相关
        this.get_dynamic_relatedMe();
      }
    },
    methods: {
      computedAvatar(item){
        if(item.length==1){
          return "li-1"
        }else if(item.length==2) {
          return "li-2"
        }if(item.length==4) {
          return "li-2"
        }else {
          return "li-3"
        }
      },
      //附件下载
      fileDownload(url) {
        console.log(url);
        if (!url) {
          return;
        }
        window.open(url);

        // console.log(url);
        // var myFrame = document.createElement('iframe');
        // // 'https://www.smartptm.com/file/1574387841676_qn17l3lhpu.txt'
        // // https://www.smartptm.com/ptm/plan/file/2019/12/01/1575196657350vriva.txt
        // myFrame.src=url+'?time='+new Date().getTime();
        // myFrame.style.display = 'none';
        // document.body.appendChild(myFrame);
      },
      //查询与我相关的工作圈
      get_dynamic_relatedMe() {
        this.$http.get('plan/dynamic/relatedMe', {
          params: {
            pageNum: 1,
            pageSize: 999,
            userId: this.$store.state.userInfo.userId,
          }
        }).then(res => {
          if (res.statusCode == 200) {
            var list = (res.data && res.data.list) || [];
            if (list.length > 0) {
              list.forEach(item => {
                item.zdy_content = ''; //自定义参数  评论内容
                item.zdy_isShowPingLunInput = false; //自定义参数  是否显示评论框
              });
            }
            this.dataList = list;
            setTimeout(()=> {
              this.is_show_loading=false;
            }, 1000);
            // this.dataList = (res.data && res.data.list ) || [];
            // this.setDataListBasicData();
          } else {
            this.dataList = [];
            this.$message.error(res.statusMsg);
          }
        })
      },
      closeModal(res) {
        this[res] = false;
      },
      openAddSummary() {
        this.is_show_setSummary = true;
        this.addOrEditData = {
          projectId: this.projectId,
          projectName: this.projectInfo.shortName,
          currentProgress: this.projectInfo.progressProportion
        };
      },
      openEditSummary(item) {
        this.is_show_setSummary = true;
        this.addOrEditData = {
          projectId: this.projectId,
          dynamicId: item.id,
          content: item.content,
          progressProportion: item.progressProportion,
          warning: item.warning,
          projectName: this.projectInfo.shortName,
          currentProgress: item.progressProportion,
        };
      },
      deleteSummary(id) {
        this.deleteId = id;
        this.is_show_deleteSummary = true;
      },
      deleteSummaryCallback(res, indexClose) {
        var json = {
          dynamicId: this.deleteId
        };
        this.$http.post("/plan/dynamic/delete", json).then(res => {
          if (res.statusCode == 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.closeModal(indexClose);
            this.getDataList();
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getProjectInfo() {
        var json = {
          projectId: this.projectId,
          userId: this.$store.state.userInfo.userId
        };
        this.$http.post("/project/project/info", json).then(res => {
          if (res.statusCode == 200) {
            this.projectInfo = res.data;
            if (this.projectInfo.managerId == this.$store.state.userInfo.userId) {
              //是否是项目经理
              this.isManager = true;
            }
          }
        }).catch(err => {
          console.log(err)
        })
      },
      //获取动态
      getDataList() {
        var json = {
          companyId: this.$store.state.userInfo.companyId,
          userId: this.$store.state.userInfo.userId,
          projectId: this.projectId || '',
          pageNum: 1,
          pageSize: 9999,
          kw: this.projectSearchName || ''
        };
        // if (this.type == '1') {
        //   json.managerReport = true; //查项目经理总结
        // }
        this.$http.get('/plan/dynamic/list', {
          params: json
        }).then(res => {
          if (res.statusCode == 200) {
            var list = (res.data && res.data.list) || [];
            if (list.length > 0) {
              list.forEach(item => {
                item.zdy_content = ''; //自定义参数  评论内容
                item.zdy_isShowPingLunInput = false; //自定义参数  是否显示评论框
              });
            }
            this.dataList = list;
            setTimeout(()=> {
              this.is_show_loading=false;
            }, 1000);
            // this.dataList = (res.data && res.data.list ) || [];
            // this.setDataListBasicData();
          } else {
            this.dataList = [];
          }
        }).catch(error => {
          console.log(error);
        });
      },
      setSummaryCallback() {
        this.is_show_setSummary = false;
        this.addOrEditData = {};
        this.$message({
          message: '保存成功',
          type: 'success'
        });
        this.getProjectInfo();
        this.getDataList();
      },
      setLikes(item) {
        this.dynamicLikes(item.id);
        if (item.selfLikes == true) {
          //取消点赞 删除数组
          item.selfLikes = false;
          for (let i = 0, len = item.dynamicLikesVos.length; i < len; i++) {
            let d = item.dynamicLikesVos[i];
            if (d.userId == this.$store.state.userInfo.userId) {
              item.dynamicLikesVos.splice(i, 1);
              return;
            }
          }

        } else {
          //点赞 添加数组
          item.dynamicLikesVos.push({
            userId: this.$store.state.userInfo.userId,
            userName: this.$store.state.userInfo.name,
          });
          item.selfLikes = true;
        }
      },
      //点赞或者取消点赞
      dynamicLikes(dynamicId) {
        let json = {
          dynamicId: dynamicId,
          userId: this.$store.state.userInfo.userId,
        };
        this.$http.post("/plan/dynamic/likes/likes", json).then(res => {
          if (res.statusCode == 200) {

          }
        }).catch(err => {
          console.log(err)
        })
      },
      addPingLunSubmit(item) {
        if (item.zdy_content == '') {
          this.$message({
            message: '请输入内容',
            type: 'error'
          });
          return false;
        }
        let json = {
          ateUserId: [],
          content: item.zdy_content,
          dynamicCommentId: this.dynamicCommentId,//回复id
          dynamicId: item.id,
          userId: this.$store.state.userInfo.userId,
        };
        this.$http.post("/plan/dynamic/comment/insert", json).then(res => {
          if (res.statusCode == 200) {
            item.oneLevelComments && item.oneLevelComments.push(res.data);
            item.zdy_content = '';
            item.zdy_isShowPingLunInput = 0;
            this.$message({
              message: '操作成功',
              type: 'success'
            });
          } else {
            this.$message.error(res.statusMsg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      setDataListBasicData() {
        if (this.dataList != null && this.dataList.length > 0) {
          this.dataList.forEach(item => {
            item.zdy_content = ''; //自定义参数  评论内容
            item.zdy_isShowPingLunInput = 0; //自定义参数  是否显示评论框

          });
        }
      },
      setPingLunInputShow(item) {
        item.zdy_isShowPingLunInput = item.zdy_isShowPingLunInput == 0 ? 1 : 0;
        item.zdy_content = '';
        this.dynamicCommentId = ''; //清除回复人id
        this.huiFuName = '';
      },
      setHuiFuInputShow(item, itemPL) {
        item.zdy_isShowPingLunInput = 2;
        item.zdy_content = '';
        this.dynamicCommentId = itemPL.commentId; //清除回复人id
        this.huiFuName = itemPL.userName;
      },
      opemImg(url){
        this.dialogImageUrl = url;
			  this.dialogVisible = true;
      }
    }
  }

</script>
<style lang='scss' scoped type="text/scss">
  .main {
    height: calc(100% - 25px);
    // overflow:hidden;
    display: flex;
    flex-direction: column;
    min-width: 854px;
    position: relative;

    .default-page {
      margin-top: 0;
      text-align: center;
      width: 100%;
      height: calc(100% - 24px);
      background-color: #ffffff;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 6px;

      > .box {
        width: 290px;
        height: 312px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
        font-size: 18px;
        color: #96A2AA;

        img {
          display: inline-block;
        }

        p {
          padding-top: 39px;
          font-size: 18px;
          /*font-size: 14px;*/
          /*color: #96A2AA;*/
        }
      }
    }
      .plan_icon_qi{
        background-image: url("../../../assets/img/workCircle/ic_qi.png");
        width: 9px;
        height: 11px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: inline-block;
      }
    > .head {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .back-title {
        display: flex;
        align-items: center;

        .back {
          color: #96a2aa;
        }
      }
    }

    > .content {
      // flex:1;
      height: calc(100% - 80px);
      display: flex;
      flex-wrap: wrap;
      position: relative;
      width: 854px;
      margin: 0 auto;
      > .list-dynamic {
        min-width: 510px;
        width: 100%;
        height: 100%;
        // display:flex;
        // flex-wrap:wrap;
        // align-content:flex-start;
        // justify-content: center;
        overflow-y: auto;

        &::-webkit-scrollbar {
          display: none
        }

        -ms-overflow-style: none; /* IE 10+ */
        scrollbar-width: none; /* Firefox */
        > .item {
          width: 854px;
          margin: 0 auto;

          > .item-release {
            width: 100%;
            background-color: #ffffff;
            box-shadow: 0px 0px 20px 0px rgba(10, 82, 228, 0.06);
            border-radius: 6px;
            /*border-top-left-radius: 6px;*/
            /*border-top-right-radius: 6px;*/
            position: relative;
            .plan_icon{
              >i{
                display: inline-block;
                width: 12px;
                height: 16px;
                background-image: url("../../../assets/img/workCircle/ic_gzq_b.png");
                vertical-align: middle;
              }
              position: absolute;
              top: 41px;
              right: 48px;
              font-size: 14px;
              color: #333333;
              >span{
                color: #0A52E4;
              }
            }
            .item-head {

              display: flex;

              .head-img {
                width: 48px;
                height: 48px;
                margin-right: 24px;

                > img {
                  border-radius: 50%;
                  width: 100%;
                  height: 100%;
                }
              }

              .head-content {
                width:calc(100% - 72px);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              }

            }

            .item-content {
              padding: 16px 24px 0 72px;
              .images-list{
                overflow: hidden;
                li{
                  width: 190px;
                  height: 190px;
                  margin-right: 8px;
                  margin-bottom: 8px;
                  background-size: cover;
                  background-repeat: no-repeat;
                  background-position: center;
                  float: left;
                  position: relative;
                  /*>img{*/
                  /*  display: block;*/
                  /*  width: 190px;*/
                  /*  height: 190px;*/
                  /*}*/
                  > .img {
                    /*position: absolute;*/
                    /*left: 0;*/
                    /*top: 0;*/
                    display: block;
                    width: 100%;
                    height: 100%;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;
                    /*border-radius: 6px;*/
                  }
                }
                .li-1{
                  width:100%;
                  height: 260px;
                  margin: 0;
                }
                .li-2{
                  width: calc(50% - 8px - 8px);
                }
                .li-3{
                  width: 190px;
                }
              }
              .video-list{
                overflow: hidden;
                li{
                  float: left;
                  width: 320px;
                  height: 180px;
                  margin-right: 8px;
                  margin-bottom: 8px;
                  video{
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                  }
                }
              }
              .files-list{
                overflow: hidden;
                li{
                  width: 100px;
                  height: 100px;
                  border: 1px solid #EEEEEE;
                  text-align: center;
                  font-size: 12px;
                  padding-top: 60px;
                  box-sizing: border-box;
                  color: #96A2AA;
                  position: relative;
                  margin-right:8px;
                  margin-bottom: 8px;
                  border-radius: 6px;
                  white-space: nowrap;
                  cursor: pointer;
                  float: left;
                }
                i {
                  position: absolute;
                  width: 20px;
                  height: 20px;
                  top: 30px;
                  left: 40px;
                  background-image: url("../../../assets/img/annex/ic_ty.png");
                }

                i.add {
                  background-image: url("../../../assets/img/annex/ic_add.png");
                }

                i.word-icon {
                  background-image: url("../../../assets/img/annex/ic_word.png");
                }
                i.pdf-icon {
                  background-image: url("../../../assets/img/annex/ic_pdf.png");
                }
                i.txt-icon {
                  background-image: url("../../../assets/img/annex/ic_txt.png");
                }
                i.xlsx-icon{
                  background-image: url("../../../assets/img/annex/ic_excel.png");
                }
                i.ppt-icon{
                  background-image: url("../../../assets/img/annex/ic_ppt.png");
                }
                i.video-icon{
                  background-image: url("../../../assets/img/annex/ic_video.png");
                }
                i.icon-del{
                  background-image: url("../../../assets/img/annex/ic_delete.png");
                  width: 16px;
                  height: 16px;
                  position: absolute;
                  left: 90px;
                  top: -5px;
                }
              }
              .content-text {
                margin-bottom: 20px;
              }
            }
          }

          > .item-comment {
            width: 100%;
            padding: 16px 40px 20px 112px;
            background-color: #e8eff5;
            border-radius: 0px 0px 6px 6px;

            .comment {
              width: 100%;

              .comment_zan {
                line-height: 24px;
                display: flex;
                // align-items:center;
                // flex-wrap:wrap;
                > .zan_likes {
                  width: calc(100% - 26px);
                }
              }

              .comment_pinglun {
                display: flex;
                /*padding-top:16px;*/
                /*border-top: 1px solid #dee6ec;*/
                .pinglun_tx {
                  width: 36px;
                  height: 36px;
                  margin-right: 16px;

                  > img {
                    border-radius: 50%;
                    width: 100%;
                    height: 100%;
                  }
                }

                .pinglun_item {
                  width: calc(100% - 100px);

                  .pinglun_input {

                  }
                }

                .pinglun_btns {
                  display: flex;
                  align-items: flex-end;
                  padding-bottom: 2px;

                  .pinglun_btn {
                    width: 63px;
                    height: 32px;
                    background-color: #ff8f2b;
                    border-radius: 6px;
                    cursor: pointer;
                    text-align: center;
                    font-size: 14px;
                    line-height: 31.5px;
                    color: #ffffff;
                  }
                }

              }
              .bd-t{
                border-top: 1px solid #dee6ec;
              }
            }
          }
        }

        .system-dynamic {
          margin-top: 16px;
          width: 854px;
          height: 196px;
          background: #ffffff;
          border-radius: 6px;
          padding: 40px 50px 40px 110px;
          box-sizing: border-box;
          position: relative;

          > h3 {
            font-size: 14px;
            color: #454A55;
            position: relative;
            font-weight: bold;
            padding-bottom: 24px;

            > i {
              position: absolute;
              width: 40px;
              height: 20px;
              line-height: 20px;
              border-radius: 2px;
              border: 1px solid #FF9920;
              left: 80px;
              top: -3px;
              color: #FF9920;
              font-size: 12px;
              text-align: center;
              font-weight: normal;
            }
          }

          > p {
            font-size: 14px;
            color: #454A55;
            line-height: 20px;
            padding-bottom: 20px;
          }

          .time {
            font-size: 12px;
            color: #96A2AA;
          }

          .img {
            position: absolute;
            left: 40px;
            top: 40px;
            width: 44px;
            height: 47px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-color: #EEEEEE;
            border-radius: 50%;
          }
          .xt{
            background-image: url("../../../assets/img/workCircle/ic_jiqiren_tx.png");
          }
        }
      }
    }

    .ic_flag-fill {
      width: 11px;
      height: 13px;
      background-image: url("~@/assets/img/project/info/ic_flag-fill.png");
    }

    .add_new-job {
      width: 12px;
      height: 12px;
      background-image: url("~@/assets/img/project/add_new-job.png");
    }

    .ic_delete-fill {
      width: 14px;
      height: 14px;
      background-image: url("~@/assets/img/project/dynamic/ic_delete-fill.png");
    }

    .ic_down {
      width: 5px;
      height: 14px;
      background-image: url("~@/assets/img/project/dynamic/ic_down.png");
    }

    .ic_edit {
      width: 14px;
      height: 14px;
      background-image: url("~@/assets/img/project/dynamic/ic_edit.png");
    }

    .ic_fill {
      width: 12px;
      height: 12px;
      background-image: url("~@/assets/img/project/dynamic/ic_fill.png");
    }

    .ic_flat {
      width: 6px;
      height: 1px;
      background-image: url("~@/assets/img/project/dynamic/ic_flat.png");
    }

    .ic_schedule {
      width: 12px;
      height: 12px;
      background-image: url("~@/assets/img/project/dynamic/ic_schedule.png");
    }

    .ic_up {
      width: 5px;
      height: 14px;
      background-image: url("~@/assets/img/project/dynamic/ic_up.png");
    }

    .ic_like {
      width: 15px;
      height: 14px;
      background-image: url("~@/assets/img/project/info/ic_like.png");
    }

    .ic_dislike {
      width: 15px;
      height: 14px;
      background-image: url("~@/assets/img/project/info/ic_dislike.png");
    }

    .ic_comment-dots {
      width: 13px;
      height: 14px;
      background-image: url("~@/assets/img/project/info/ic_comment-dots.png");
    }
  }
</style>
<style lang="scss">
  .main-dynamic {

  .pinglun_input {

  .el-textarea__inner {
    min-height: 36px !important;
  }

  }
  }

</style>
